<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

    <!-- font-icon -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css">
    <!-- bootstrap-core -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

    <link rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/header.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/app.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${ctxFrontStatic }/libs/html5shiv.min.js"></script>
    <script src="${ctxFrontStatic }/libs/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main" style="padding-top: 20px">
    <div class="container-fluid ">

        <div class="wlk-top">
            <div class="row">
                <div class="col-sm-2">
                    <img src="${ctxFrontStatic }/images/address-book.png" alt=""/>
                </div>
                <div class="col-sm-3" style="margin-left: -29px;">
                    <p class="p-title">短信发送历史</p>
                    <p class="p-en">Invoice Details</p>
                </div>
            </div>
        </div>

        <div class="wlk-bottom">
            <div class="invoice-cont">
                <div class="row top-banner">
                    <div class="col-sm-8 ">
                        <input type="hidden" name="userId" value="${fns:getUser().id}" id="id">
                        <%--<lable>--%>
                            <%--<span class="sort-text">排序方式</span>--%>
                        <%--</lable>--%>

                        <%--<button class="btn btn-xs btn-default flag">按时间</button>--%>
                        <%--<button class="btn btn-xs btn-default flag">按金额</button>--%>
                    </div>
                    <%--<div class=" col-sm-8">--%>
                        <%--<lable>--%>
                            <%--<span class="time-text col-sm-6">发送时间</span>--%>
                        <%--</lable>--%>
                        <%--<div class="col-sm-12">--%>
                            <%--<input class="form-control " placeholder="请选择日期" id="datetimepicker-one" class="sendDate">--%>
                            <%--<img src="${ctxFrontStatic }/images/calendar.png" class="inp-img"/>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class=" col-sm-8">--%>
                        <%--<lable>--%>
                            <%--<span class="time-text col-sm-6">taskid</span>--%>
                        <%--</lable>--%>
                        <%--<div class="col-sm-12">--%>
                           <%--<input type="text" name="taskId">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<input type="button" value="查询" id="find">--%>


                </div
                <h4>${message}</h4><h4>搜索条件:</h4>
                号码:<input type="text" value="${phone}" id="phoneFind">&nbsp;&nbsp;&nbsp;&nbsp;
                <%--内容:<input type="text" value="${content}" id="contentFind">&nbsp;&nbsp;&nbsp;&nbsp;--%>
                    <input type="button" value="搜索" id="search">&nbsp;&nbsp;&nbsp;&nbsp;
                     <input type="button" value="返回 " onClick="javascript :history.back(-1)"><br/>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>手机号码</th>
                        <th>发送时间</th>
                        <th>状态</th>
                        <th>状态原因</th>
                        <th>状态时间</th>
                        <th>号码数量</th>
                    </tr>
                    </thead>
                    <tbody>
                   <input type="hidden" value="${taskid}" id="taskid"/>
                    <c:forEach items="${list}" var="temp">
                        <tr>

                            <td class="cutLength">${fn:substring(temp.phone, 0, 20)}...</td>
                            <td><fmt:formatDate value="${temp.submitTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                            <td>${temp.status}</td>
                            <td>${temp.statusReason}</td>
                            <td><fmt:formatDate value="${temp.statusTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                            <td>${temp.smsSize}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>

                总记录数<input type="text" value="${page.totalItemCount}" id="totalItemCount" readonly>
                总页数<input type="text" value="${page.totalPageNum}" id="totalPageNum" readonly>
               当前页 <input type="text" value="${page.currentPageNo}" id="currentPageNo" readonly><br/>
                每页数量设置<input type="text" value="${page.perPageCount}" id="perPageCount"><br/>

                <input type="button" value="上一页" id="prev">

                <input type=<input type="text" id="page">
                <input type="button" id="jumpBtn" value="跳转">

                <input type="button" value="下一页" id="next">
                <div>
                </div>

            </div>

        </div>
    </div>


</section>


<!--js-->
<script src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script src="${ctxFrontStatic }/js/navbar.js"></script>

<script>




    var taskid;
    var totalItemCount;
    var totalPageNum;
    var currentPageNo;
    var perPageCount;
    var id;
    var sendDate;



    $(function(){

        $("#search").bind("click",function(){
			var phoneFind=$("#phoneFind").val();
//			var contentFind= $("#contentFind").val();
			var perNum=$("#perPageCount").val();
			var res=parseInt(perNum);
			if(isNaN(res)){
				alert("每页数量解析异常");
				res=5;
			}
			window.location.href="${ctxFront}/jump/orderList?currentPageNo="+currentPageNo+"&perPageCount="+res+"&userId="+id+"&submitId="+taskid+"&phone="+phoneFind;
        })
        taskid=$("#taskid").val();
		totalItemCount=$("#totalItemCount").val();
		totalPageNum=$("#totalPageNum").val();
		currentPageNo=$("#currentPageNo").val();
		perPageCount=$("#perPageCount").val();
		id=$("#id").val();
		sendDate=$(".sendDate").val();
        $("#prev").bind("click",function(){
        	if (currentPageNo=='1'){
        		alert("已经是第一页");
            }else{
				currentPageNo--;
				$("#search").trigger("click");
            }

        })
        $("#next").bind("click",function(){
			if (currentPageNo==totalPageNum){
				alert("已经是最后一页");
			}else{
				currentPageNo++;
				$("#search").trigger("click");
			}

        })

        $("#jumpBtn").bind("click",function(){
        	var page=$("#page").val();
			var res=parseInt(page);
			if(isNaN(res)){
				alert("输入页码不合法");
            }else {
				if(res>totalPageNum||res<=0){
					alert("页码输入超出范围");
                }else {
					currentPageNo=res;
					$("#search").trigger("click");
                }
            }



        })

        $(".sendDate").bind("click",function(){
			var res=$(".sendDate").val();
        	alert(res);
        });

    })




    $(function () {
        $('#datetimepicker-one').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            minView: 'month',
            autoclose: true,//选中关闭
            todayBtn: true//今日按钮
        });
    });
    //数据操作按钮点击变色
    //加载事件
    $('.flag').on('click', function () {
        $(this).css({
            'background-color': '#2e8ded',
            'color': '#fff'
        }).siblings().css({
            'background-color': '#fff',
            'color': 'black'
        });
    });



</script>
</body>
</html>